<template>
    <div class="addGrade-container">
        <n-card
              title="添加成绩"
              hoverable
        >
            <div class="add-form-container">
                <n-form
                      :model="newGrade"
                      :rules="rules"
                      ref="formRef"
                      label-placement="left"
                      label-align="left"
                      :label-width="100"
                      :show-require-mark="false"
                >
                    <n-form-item
                          label="学号"
                    >
                        <n-select
                              v-model:value="newGrade.studentNumber"
                              :options="studentList"
                        />
                    </n-form-item>
                    <n-form-item
                          label="课程名称"
                          path="gradeName"
                    >
                        <n-select
                              v-model:value="newGrade.gradeName"
                              :options="gradeNameOptions"
                        />
                    </n-form-item>
                    <n-form-item
                          label="成绩"
                          path="gradePoint"
                    >
                        <n-input-number
                              v-model:value="newGrade.gradePoint"
                              :min="0"
                              :max="100"
                        />
                    </n-form-item>
                    <n-form-item>
                        <n-popconfirm
                              negative-text="取消"
                              positive-text="确认"
                              @positive-click="addGrade"
                        >
                            <template #trigger>
                                <n-button type="primary">
                                    提交
                                </n-button>
                            </template>
                            确认添加该成绩吗？
                        </n-popconfirm>
                    </n-form-item>
                </n-form>
            </div>
        </n-card>
    </div>
</template>

<script>
import { defineComponent, ref} from 'vue'
import { useMessage } from 'naive-ui'
import api from '../api'

export default defineComponent({
    name: 'AddGrade',
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            vm.getStudentList()
        })
    },
    setup() {
        const formRef = ref(null)
        const message = useMessage()
        window.$message = useMessage()
        return {
            formRef,
            newGrade: ref({
                studentNumber: '',
                gradeName: '',
                gradePoint: 0
            }),
            rules: {
                gradeName:[{required:true, message: '请选择课程名称', trigger:'blur'}],
                gradePoint:[{type: 'number',required:true, message: '请录入成绩', trigger:'blur'}]
            },
            gradeNameOptions: [
                {
                    label: '高等数学',
                    value: '高等数学'
                },
                {
                    label: '大学物理',
                    value: '大学物理'
                },
                {
                    label: '大学英语',
                    value: '大学英语'
                },
                {
                    label: '计算机网络',
                    value: '计算机网络'
                },
                {
                    label: '操作系统',
                    value: '操作系统'
                }
            ],
            addSuccess() {
                message.success('添加成功')
            },
            validForm() {
                let hasErrors = false
                formRef.value.validate((errors) => {
                    if(errors) {
                        window.$message.error('请填写正确信息！')
                        hasErrors = true
                    }
                })
                return hasErrors
            },
        }
    },
    data() {
        return{
            studentList: []
        }
    },
    methods: {
        async getStudentList() {
            const resp = await api.student.findStudent('')
            this.studentList = resp.data.map((s) => {
                return {
                    label: s,
                    value: s
                }
            })
        },
        async addGrade() {
            if(this.newGrade.gradePoint == null) {
                return
            }
            if(this.validForm()) {
                console.log('wrong...')
                return
            }
            await api.grade.addGrade({
                gradeName: this.newGrade.gradeName,
                gradePoint: this.newGrade.gradePoint
            }, this.newGrade.studentNumber)
            this.addSuccess()
        }
    }
})
</script>

<style scoped lang="less">
.addGrade-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    margin-top: 5%;
    .n-card {
        width: 60%;
        height: 45%;
        padding: 5%;
    }
}
</style>